<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <link rel="stylesheet" href="../js/bootstrap/css/bootstrap.min.css">
    <title>会员注册</title>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <ul class="bg-danger" id="errorDiv"></ul>
            <form class="form-horizontal" >
                <div class="form-group">
                    <label  class="col-sm-2 control-label">会员名:</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" id="memberName"  placeholder="请输入会员名">
                        <div id="memberNameTip"></div>

                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-2 control-label">昵称:</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" id="nickName"  placeholder="请输入昵称">
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-2 control-label">密码:</label>
                    <div class="col-sm-4">
                        <input type="password" class="form-control" id="password"  placeholder="请输入密码">
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-2 control-label">确认密码:</label>
                    <div class="col-sm-4">
                        <input type="password" class="form-control" id="confirmPassword"  placeholder="请输入确认密码">
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-2 control-label">手机号:</label>
                    <div class="col-sm-4">
                        <div class="input-group">
                            <input type="text" class="form-control" id="phone"  placeholder="请输入手机号">
                            <span class="input-group-btn">
                                <button class="btn btn-primary" type="button" onclick="sendCode();" id="codeButton">发送验证码</button>
                            </span>
                        </div>
                        <div id="phoneTip"></div>
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-2 control-label">短信验证码:</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" id="code"  placeholder="请输入短信验证码">

                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-2 control-label">邮箱:</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" id="mail"  placeholder="请输入邮箱">
                        <div id="mailTip"></div>
                    </div>
                </div>
                <!--<img src="http://localhost:8083/api/code"/>-->
                <div style="text-align: center;">
                    <button type="button" class="btn btn-primary" id="regButton" onclick="reg();">注册</button>
                    <button type="reset" class="btn btn-default">重置</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="../js/jquery-3.3.1.js"></script>
<script src="../js/bootstrap/js/bootstrap.min.js"></script>
<script src="../js/common/common.js"></script>
<script>
    
    function sendCode() {
        var v_phone = $("#phone").val();
        // js验证
        // 非空验证

        // 验证手机格式是否正确[js正则表达式]

        $.ajax({
            type:"post",
            url:config.SERVER_URL+"sms/sendMsg",
            data:{"phone":v_phone},
            success:function (res) {
                if (res.code == config.SUCCESS) {
                    alert("发送短信成功");
                } else {
                    alert(res.msg);
                }
            }
        })
    }
    
    
    function reg() {
        var v_param = {};
        v_param.memberName = $("#memberName").val();
        v_param.nickName = $("#nickName").val();
        v_param.password = $("#password").val();
        v_param.confirmPassword = $("#confirmPassword").val();
        v_param.phone = $("#phone").val();
        v_param.code = $("#code").val();
        v_param.mail = $("#mail").val();

        // js验证

        // 非空验证

        // 密码和确认密码是否一致的验证

        // 手机号格式

        // 邮箱格式



        $.ajax({
            type:"post",
            url:config.SERVER_URL+"members/reg",
            data:JSON.stringify(v_param),
            contentType:"application/json",
            success:function (res) {
                if (res.code == config.SUCCESS) {
                    location.href = "ok.html";
                } else {
                    alert(res.msg);
                }
            }
        })
    }
</script>
</body>
</html>